<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表页</title>
		<style type="text/css">
			td,th{
				width: 150px;
				text-align: center;
				color: royalblue;
			}
			a{
				text-decoration: none;
				color: royalblue;
			}
			a:hover{
				color: crimson;
			}
		</style>
	</head>
	<body onload="show()">
		<button onclick="javascript:location.replace('/login.html');" type="button">退出登录</button><br>
		<div>
			<!-- 搜索框 -->
			<input placeholder="请输入要搜索的用户名" type="text" id="key" /><button onclick="search()">搜索</button>
			<!-- 列表框 -->
			<table border="1" cellspacing="0" bordercolor="aquamarine">
				<thead>
					<tr>
						<th>用户名称</th>
						<th>电子邮箱</th>
						<th>联系方式</th>
						<th>用户姓名</th>
						<th>用户性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="6">加载中...</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script>
			// 列表页
			function show(){
				let body = document.querySelector('tbody');

				//获取对象
				let xhr = new XMLHttpRequest();
				//响应数据
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						let data = JSON.parse(xhr.responseText);
						// console.log(data);
						let str = '';
						for(let key in data){
							let sex = '保密';
							if(data[key].gender == 1){
								sex = '男';
							}else if(data[key].gender == 0){
								sex = '女';
							}
							
							str += `<tr>
										<td>${data[key].uname}</td>
										<td>${data[key].email}</td>
										<td>${data[key].phone}</td>
										<td>${data[key].user_name}</td>
										<td>${sex}</td>
										<td>
											<a href="javascript:void(0);" onclick="deleteById(${data[key].uid})">删除</a>&nbsp;
											<a href="/edit.html?id=${data[key].uid}">修改</a>
										</td>
									</tr>`;
						}
						body.innerHTML = str;
					}
				};
				//打开连接
				xhr.open('get','/pro/v1/list',true);
				//发送请求
				xhr.send();
			}
			
			// 搜索
			function search(){
				let uname = key.value ? key.value : location.reload();
				// console.log(uname);
				let body = document.querySelector('tbody');
				
				//获取对象
				let xhr = new XMLHttpRequest();
				//接收响应，打开监听
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						let data = JSON.parse(xhr.responseText);
						
						let str = '';
						for(let key in data){
							let sex = '保密';
							if(data[key].gender == 1){
								sex = '男';
							}else if(data[key].gender == 0){
								sex = '女';
							}
							
							str += `<tr>
										<td>${data[key].uname}</td>
										<td>${data[key].email}</td>
										<td>${data[key].phone}</td>
										<td>${data[key].user_name}</td>
										<td>${sex}</td>
										<td>
											<a href="javascript:void(0);" onclick="deleteById(${data[key].uid})">删除</a>&nbsp;
											<a href="/edit.html?id=${data[key].uid}">修改</a>
										</td>
									</tr>`;
						}
						body.innerHTML = str;
					}
				};
				//打开连接
				xhr.open('GET',`/pro/v1/search/${uname}`,true);
				//发送请求
				xhr.send();
			}
		
			//根据id删除
			function deleteById(id){
				if(confirm('确认删除吗？')){
					//获取对象
					let xhr = new XMLHttpRequest();
					//接收响应，打开监听
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4 && xhr.status == 200){
							let data = xhr.responseText;
							if(data == 1){
								alert('删除成功');
								show();
							}else{
								alert('删除失败');
							}
						}
					};
					//打开连接
					xhr.open('delete',`/pro/v1/del/${id}`,true);
					//发送请求
					xhr.send();
				}
			}
			
		</script>
	</body>
</html>
